<template>
  <div>
    <h1 style="margin-top: 10px">供应商产品中心</h1>
    <el-container>
      <el-main>
        <div id="table">
          <el-table
            v-loading="loading"
            element-loading-text="拼命加载中"
            :data="SpPagedata"
            stripe
            border
            height="700"
            style="width: 100%;height: 100% ;">
            <el-table-column
              prop="id"
              label="序号"
              width="50">
            </el-table-column>
            <!--<el-table-column-->
              <!--label="产品图像"-->
              <!--width="180">-->
              <!--<template slot-scope="scope">-->
                <!--<el-image-->
                  <!--style="width: 100px; height: 100px"-->
                  <!--:src="'http://localhost/static/cpstorage/'+scope.row.productName+'.jpg'"></el-image>-->
              <!--</template>-->
            <!--</el-table-column>-->
            <el-table-column
              prop="productNo"
              label="产品编号"
              width="180">
            </el-table-column>
            <el-table-column
              prop="productName"
              label="产品名称"
              width="340">
            </el-table-column>
            <el-table-column
              prop="band"
              label="产品品牌"
              width="180">
            </el-table-column>
            <el-table-column
              prop="spec"
              label="产品规格"
              width="180">
            </el-table-column>
            <el-table-column
              prop="unit"
              label="计量单位"
              width="100">
            </el-table-column>
            <el-table-column
              prop="price"
              label="产品单价"
              width="100">
            </el-table-column>
            <el-table-column
              prop="amount"
              label="存储数量"
              width="100">
            </el-table-column>
            <el-table-column
              label="操作">
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="changeF( scope.row )"  v-if="status==='1'">编辑</el-button>
                <el-button type="text" size="small" @click="instoButton(scope.row)">入库</el-button>
                <el-button type="text" size="small" @click="outstoButton(scope.row)">出库</el-button>
                <el-button type="text" size="small" @click="del( scope.row )"  v-if="status==='1'">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            layout="prev, pager, next"
            background
            @current-change="pageChange"
            :current-page.sync="currentPage"
            :total='dataNum'>
          </el-pagination>
        </div>
      </el-main>
      <el-footer>
        <el-col :span="4" :offset="20"><el-button type="primary" @click="createsps()">创建供应商产品</el-button></el-col>
      </el-footer>
    </el-container>

    <el-dialog title="入库详细" :visible.sync="ifIn">
      <el-form :model="instoForm" ref="instoForm">
        <el-form-item label="入库数量" :rules="{required: true, message: '请输入入库数量', trigger: 'blur'}" prop="amount">
          <el-input v-model="instoForm.amount"  placeholder="请输入入库数量" @input="limitInput($event,'amount','instoForm')"></el-input>
        </el-form-item>
        <el-form-item label="第三方订单编号">
          <el-input v-model="instoForm.thirdOrderNo">
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="ifIn = false">取 消</el-button>
        <el-button type="primary" @click="insto">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="出库详细" :visible.sync="ifOut">
      <el-form :model="outstoForm" ref="outstoForm">
        <el-form-item label="出库数量" :rules="{required: true, message: '请输入出库数量', trigger: 'blur'}" prop="amount">
          <el-input v-model="outstoForm.amount"  placeholder="请输入出库数量" @input="limitInput($event,'amount','outstoForm')"></el-input>
        </el-form-item>
        <el-form-item label="第三方订单编号">
          <el-input v-model="outstoForm.thirdOrderNo">
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="ifOut = false">取 消</el-button>
        <el-button type="primary" @click="outsto">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="修改商品" :visible.sync="ifchange">
      <el-form :model="changeForm" ref="changeForm">
        <el-form-item label="产品名称" :rules="{required: true, message: '请输入产品名称', trigger: 'blur'}" prop="productName">
          <el-input v-model="changeForm.productName"  placeholder="请输入产品名称"></el-input>
        </el-form-item>
        <el-form-item label="产品规格" :rules="{required: true, message: '请输入产品规格', trigger: 'blur'}" prop="spec">
          <el-input v-model="changeForm.spec"  placeholder="请输入产品规格"></el-input>
        </el-form-item>
        <el-form-item label="计量单位" :rules="{required: true, message: '请输入计量单位', trigger: 'blur'}" prop="unit">
          <el-input v-model="changeForm.unit"  placeholder="请输入计量单位"></el-input>
        </el-form-item>
        <el-form-item label="产品单价" :rules="{required: true, message: '请输入产品单价', trigger: 'blur'}" prop="price">
          <el-input v-model="changeForm.price"  placeholder="请输入产品单价" @input="limitInput($event,'price','changeForm')"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="ifchange = false">取 消</el-button>
        <el-button type="primary" @click="change">确 定</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>
    export default {
      name: "spstorage",
      inject:['reload'],
      data(){
        return {
          loading: true,
          status:'',
          Spdata: [],
          SpPagedata: [],
          ifIn: false,
          ifOut: false,
          ifchange: false,
          dataNum:0,
          currentPage:1,
          instoForm: {
            amount: '',
            thirdOrderNo: '',
            productNo:''
          },
          outstoForm: {
            amount: '',
            thirdOrderNo: '',
            productNo:''
          },
          changeForm:{
            productNo:'',
            productName:'',
            spec:'',
            unit:'',
            price:'',
          }
        }
      },
      beforeRouteEnter(to, form, next) {
        next()
        this.xuanran()
      },
      created(){
        this.status=localStorage.getItem("status")
        this.xuanran()
      },
      methods:{
        /**
         * @param {string} value - 输入的值
         * @param {string} name - 匹配的对象属性 [mkPrice | slPrice]
         */
        limitInput(value, name,formName) {
          this[formName][name] =
            ("" + value) // 第一步：转成字符串
              .replace(/[^\d^\.]+/g, "") // 第二步：把不是数字，不是小数点的过滤掉
              .replace(/^0+(\d)/, "$1") // 第三步：第一位0开头，0后面为数字，则过滤掉，取后面的数字
              .replace(/^\./, "0.") // 第四步：如果输入的第一位为小数点，则替换成 0. 实现自动补全
              .match(/^\d*(\.?\d{0,2})/g)[0] || ""; // 第五步：最终匹配得到结果 以数字开头，只有一个小数点，而且小数点后面只能有0到2位小数
        },
        pageChange(val){
          this.loading=true;
          let pageNo=this.currentPage
          this.SpPagedata=[]
          for(let i=(pageNo-1)*10;i<(pageNo*10>this.dataNum?this.dataNum:pageNo*10);i++){
            this.SpPagedata.push(this.Spdata[i])
          }
          setTimeout(()=>{
            this.loading=false
          },400);
        },
        xuanran(){
          this.$http.get("/hnhyscms_ws/spstorage/getAllProducts",{emulateJSON:true}).then(
            success=>{
              this.Spdata=success.data
              this.dataNum=success.data.length
              this.pageChange()
            }
          )
        },
        createsps(){
          this.$router.push({
            path:"/createspstorage"
          })
        },
        changeF(item){
          this.changeForm={
            productNo:item.productNo,
            productName:item.productName,
            spec:item.spec,
            unit:item.unit,
            price:item.price,
          }
          this.ifchange=true
        },
        change(){
          this.$refs['changeForm'].validate((valid) => {
            if (valid) {
              let params={
                ...this.changeForm,
              }
              this.$http.post("/hnhyscms_ws/spstorage/changeProduct",params,{emulateJSON:true}).then(
                success=>{
                  this.$message({
                    message: '修改成功',
                    type: 'success'
                  });
                  this.ifchange=false
                  this.reload();
                }
              )
            }
            })
        },
        del(item){
          this.$confirm('此操作将永久删除该产品, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
          }).then(() => {
            let params={
              productNo:item.productNo
            }
            this.$http.post("/hnhyscms_ws/spstorage/deleteByProductNo",params,{emulateJSON:true}).then(
              success=>{
                this.reload();
                this.$message({
                  type: 'success',
                  message: '删除成功!'
                });
              }
            )
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });          
          });
        },
        instoButton(item) {
          this.ifIn = true;
          this.instoForm.productNo=item.productNo
        },
        insto() {
          this.$refs['instoForm'].validate((valid) => {
            if (valid) {
              let params={
                "productNo":this.instoForm.productNo,
                "amount":this.instoForm.amount,
                "thirdOrderNo":this.instoForm.thirdOrderNo
              }
              this.$http.post("/hnhyscms_ws/spinsto/addSpinsto",params,{emulateJSON:true}).then(
                success=>{
                  this.$message({
                    message: '入库成功',
                    type: 'success'
                  });
                  this.ifIn = false;
                  this.reload();
                }
              )
            }
            })
        },
        outstoButton(item) {
          this.ifOut = true;
          this.outstoForm.productNo=item.productNo
        },
        outsto() {
          this.$refs['outstoForm'].validate((valid) => {
            if (valid) {
              let params={
                "productNo":this.outstoForm.productNo,
                "amount":this.outstoForm.amount,
                "thirdOrderNo":this.outstoForm.thirdOrderNo
              }
              this.$http.post("/hnhyscms_ws/spoutsto/addSpoutsto",params,{emulateJSON:true}).then(
                success=>{
                  if(success.data=="0")
                  {
                    this.$message({
                      message: '出库成功',
                      type: 'success'
                    });
                    this.ifIn = false;
                    this.reload();
                  }
                  else if(success.data=="1")
                  {
                    this.$message({
                      message: '出库失败（原因：库存不足）',
                      type: 'warning'
                    });
                  }
                }
              )
              this.ifOut = false;
            }
          })
          
        },

      }
    }
</script>

<style scoped>

</style>
